import React from 'react'
import './index.scss'
export default function MyFooter ({ list, changeAllStateus }) {
  // 已选中（goods_state 为 true）的数据（goods_count）
  const totalCount = list
    .filter((item) => item.goods_state)
    .reduce((acc, cur) => acc + cur.goods_count, 0)
  const totalPrice = list
    .filter((item) => item.goods_state)
    .reduce((acc, cur) => acc + cur.goods_price*cur.goods_count, 0)
  // 所有的单选都选中了，就选中全选
  const selectAllStateus = list.every(item => item.goods_state)
  return (
    <div className="my-footer">
      <div className="custom-control custom-checkbox">
        <input
          type="checkbox"
          className="custom-control-input"
          id="footerCheck"
          checked={selectAllStateus}
          onChange={() => changeAllStateus(!selectAllStateus)}
        />
        <label className="custom-control-label" htmlFor="footerCheck">
          全选
        </label>
      </div>
      <div>
        <span>合计:</span>
        <span className="price">¥ {totalPrice.toFixed(2)}</span>
      </div>
      <button type="button" className="footer-btn btn btn-primary">
        结算 {totalCount}
      </button>
    </div>
  )
}
